<template>
    <el-container>
        <el-header class="header">
            {{ merchantName }}<span
            style="font-size: 16px">阿米巴数字化经营管理系统</span>
            <div style="float: right" v-if="t">
                <el-radio-group style="display: inline" v-model="env" @change="changeEnv">
                    <el-radio-button label="dev">开发环境</el-radio-button>
                    <el-radio-button label="test">测试环境</el-radio-button>
                    <el-radio-button label="pro">生产环境</el-radio-button>
                </el-radio-group>
            </div>
            <div style="float: right; margin-right: 20px">
                <el-button type="success" round @click="loginOut">退出</el-button>
            </div>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu :router=true @open="handleOpen" @close="handleClose" @select="handleSelect" default-openeds="MERCHANT-ADMIN">
                    <!-- 一级菜单标题，一级菜单URL不能点击 -->
                    <el-submenu :index="item.url" v-for="item in menuData" :key="item.id">
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span slot="title">{{ item.title }}</span>
                        </template>
                        <el-menu-item-group>
                            <!-- 子菜单，子菜单的URL就是数据里面的url字段 -->
                            <el-menu-item :index="childItem.url" v-for="childItem in item.childPermissionList"
                                          :key="childItem.id">{{ childItem.title }}
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <el-tabs tab-position="top" type="card" closable v-model="editableTabsValue"
                         @tab-click="clickTab"
                         @tab-remove="removeTab">
                    <el-tab-pane
                        v-for="(item, index) in editableTabs"
                        :key="item.name"
                        :label="item.title"
                        :name="item.name"
                    >
                    </el-tab-pane>
                </el-tabs>
                <router-view/>
            </el-main>
        </el-container>
        <el-backtop :bottom="100"></el-backtop>
    </el-container>
</template>

<script>
import db from '@/utils/localstorage'
import {getLoginUserInfo, getMenuData} from '@/api/api'

export default {
    name: "Main",
    data() {
        return {
            env: '',
            menuData: [],
            menuTitle: {},
            currentAddress: '',
            editableTabsValue: '',
            editableTabs: [],

            t: 0,
            merchantName: '',
        }
    },
    methods: {
        clickTab(tab) {
            let curr = this.$route.path;
            if (curr === this.editableTabsValue) {
            } else {
                this.$router.push(this.editableTabsValue);
            }
        },
        removeTab(targetName) {
            let tabs = this.editableTabs;
            let activeName = this.editableTabsValue;
            if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                        let nextTab = tabs[index + 1] || tabs[index - 1];
                        if (nextTab) {
                            activeName = nextTab.name;
                        }
                    }
                });
            }

            this.editableTabsValue = activeName;
            this.editableTabs = tabs.filter(tab => tab.name !== targetName);
        },
        addTab(tabName, url) {
            this.editableTabs.push({
                title: tabName,
                name: url,
                content: '',
            });
            this.editableTabsValue = url;
        },
        handleSelect(key, keyPath) {
            // 在这里处理tab逻辑
            let exist = false;
            for (const i in this.editableTabs) {
                if (this.editableTabs[i].name === key) {
                    exist = true;
                }
            }
            if (exist) {
                this.editableTabsValue = key;
            } else {
                this.addTab(this.menuTitle[key], key);
            }
        },
        handleOpen(key, keyPath) {
            // console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            // console.log(key, keyPath);
        },
        // 退出
        loginOut() {
            // 跳转到登录页面
            this.$router.push({path: '/login'});
        },
        // 美食相册
        foodGallery() {
            // 跳转到美食相册页面
            let url = window.location.href;
            let tt = url.split("#");
            window.open(tt[0] + '#/gallery', '_blank');
        },
        chatGpt() {
            window.open("http://www.mi-gpt.com/", '_blank');
        },
        ding() {
            this.$message({
                type: 'success',
                message: '功能即将上线，敬请期待!'
            });
        },
        changeEnv(value) {
            // 设置缓存
            db.set('env', value);
            // 跳转到登录页面
            this.$router.push({path: '/login'});
        },
        username() {
            return db.getUser().username;
        },
        // 获取菜单数据
        getMenuData() {
            getMenuData().then(data => {
                this.menuData = data.body;
                this.setMenuName(this.menuData);
            });
        },
        // 设置菜单标题Map
        setMenuName(menu) {
            for (const i in menu) {
                this.menuTitle[menu[i].url] = menu[i].title;
                // 递归获取
                if (menu[i].childPermissionList) {
                    this.setMenuName(menu[i].childPermissionList);
                }
            }
        },
    },
    computed: {
        // 计算属性
    },
    created() {
        let env = db.get('env');
        console.log(env);
        if (!isEmpty(env)) {
            this.env = env;
        }
        let t = db.get('t');
        if (!isEmpty(t)) {
            this.t = t;
        }
        this.getMenuData();

        getLoginUserInfo().then(data => {
            let userInfo = data.body;
            this.merchantName = userInfo.m.name;
            document.title = this.merchantName + "-阿米巴数字化经营管理系统"
        })
    },
}

function isEmpty(obj) {
    if (obj === null) return true;
    if (typeof obj === 'undefined') {
        return true;
    }
    if (typeof obj === 'string') {
        if (obj === "") {
            return true;
        }
        if (obj === "undefined") {
            return true;
        }
        let reg = new RegExp("^([ ]+)|([　]+)$");
        return reg.test(obj);
    }
    return false;
}
</script>

<style scoped>
.header {
    height: 100%;
    width: 100%;
    background-color: rgb(26, 157, 255);
    font-size: 20px;
    line-height: 60px;
}

.el-main {
    padding-top: 0px;
}

.el-aside {
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}
</style>
